<!DOCTYPE html>
<html lang='en'>

    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <meta name="referrer" content="never">
        <title>Document</title>
        <style>
            .u1{
                display: flex;
                justify-content: space-around;
                width: 800px;
                flex-wrap: wrap;
                list-style: none;
            }
            .u1 li{
                width: 120px;
                height: 200px;
                margin: 10px;
                font-size: 13px;
                color: #338cc8;
                text-align: center;
            }
            .u1 li span{
                color: orange;
            }
            .u1 li img{
                width: 100%;
                height: 80%;
            }
            .u1 li .sp1{
                width: 17px;
                height: 17px;
                background: #63c150;
                color: white;
                display: inline-block;
            }
        </style>
    </head>

    <body>
        <div id='app'>
            <h2>分类浏览</h2>
            <film :xuanyi="xuanyi">悬疑片
                <ul class="u1" slot="xuanyi">
                    <li v-for="i in xuanyi">
                        <img :src="i.cover" alt="">
                        <div><span v-show="i.is_new" class="sp1">新</span> {{ i.title }} <span>{{i.rate}}</span></div>
                    </li>
                </ul>
            </film>
            <film :xiju="xiju">喜剧片
                <ul class="u1" slot="xiju">
                    <li v-for="i in xiju">
                        <img :src="i.cover" alt="">
                        <div><span v-show="i.is_new" class="sp1">新</span> {{ i.title }} <span>{{i.rate}}</span></div>
                    </li>
                </ul>
            </film>
        </div>
        <script type="template" id="filmcon">
            <div>
                <h2>
                    <slot></slot>
                </h2>
                <slot name="xuanyi"></slot>
                <slot name="xiju"></slot>
            </div>

        </script>
        <script src='../js/vue.js'></script>
        <script src="../js/axios.min.js"></script>
        <script>

            //film  子组件
            var film = {
                props: ['xuanyi','xiju'],
                template: "#filmcon"
            }
            var vm = new Vue({
                el: '#app',
                data: {
                    xuanyi: [],
                    xiju: []
                },
                components: {
                    film
                },
                created() {
                    axios.get("./json/xuanyi.json").then(res => {
                        console.log(res.data.subjects);
                            this.xuanyi = res.data.subjects;
                    });
                    axios.get("./json/xiju.json").then(res => {
                        console.log(res.data.subjects);
                        this.xiju = res.data.subjects;
                    });
                }
            });
        </script>
    </body>

</html>